<template>
  <div class="xmlReview">
    <div class="review">
      <h1 class="title">社交模板预览</h1>
      <h2><span>主题：</span>{{info.name}}</h2>
      <div class="head">
        <img :src="userInfo.avatar" alt="">
        <p>{{userInfo.account}}</p>
      </div>
      <div class="review-content" v-html="info.content">
      </div>
      <div class="else-file">
        <img v-for="item,index in info.photos" :key="index"  :src="item" alt="">
        <video v-show="info.video" :src="info.video" controls></video>
      </div>
    </div>
  </div>
</template>

<script>
    import {xmlTemplateDetail} from "@/api/automation/xml"
    import {mapGetters} from 'vuex'
    export default {
        name: "xmlReview",
        data() {
            return {
                info: {}
            }
        },



                computed:{
          ...mapGetters(['userInfo'])
        },
        mounted() {
            this.getDetail()
        },
        methods: {
            getDetail() {
                xmlTemplateDetail(this.$route.params.id).then(res => {
                    if (res.data.success) {
                        this.info = res.data.data;
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
  .xmlReview {
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    overflow-y: scroll;
    padding-bottom: 150px;
    height: 100%;

    .review {
      width: 1024px;
      margin: 0 auto;

      .title {
        color: #435B77;
        line-height: 40px;
        font-size: 19px;
        padding: 80px 0 70px 0;
      }

      h2 {
        font-size: 17px;
        color: #333;
        line-height: 45px;
        span{
          font-size: 15px;
        }
      }

      .head {
        display: flex;
        align-items: center;
        margin: 20px 0;

        p {
          color: #333;
          font-size: 17px;
          margin-left: 10px !important;
        }

        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          border: 1px solid #ddd;
        }
      }

      .review-content {
        text-indent: 2rem;
        font-size: 15px;
        line-height: 35px;
      }
      .else-file{
        margin-top: 20px;
      }
    }
  }
</style>
